<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<style>
    #text{
        width: 100px;
        height:100px;
        resize: none;
    }
</style>
<body>
<div id="app">
    <textarea  id="text" v-model="a" v-box></textarea>
</div>
<script>
Vue.directive('box',{
    update:function(el){
        let color1=Math.ceil(Math.random()*225);
        let color2=Math.ceil(Math.random()*225);
        let color3=Math.ceil(Math.random()*225);
        el.style.backgroundColor='rgb('+color1+","+color2+','+color3+")"
    }
});
var app=new Vue({
    el:'#app',
    data:{
        a:""
    }
})
//componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

//unbind: 只调用一次， 指令与元素解绑时调用。
</script>
</body>
</html>